<template>
  <div class="home">
    <button @click="num++">修改num</button>
    <br>
    <br>
    <button @click="str = '你开心个锤子，作业都没做'">修改str</button>
    <br>
    <br>
    <button @click="changeObj">修改obj</button>
    <br>
    <br>
    <button @click="changeArr">修改Arr</button>
  </div>
</template>

<script>
// let obj1 = {
//   name:'张三'
// }
// let obj2 = obj1
// obj2.name = '李四'
// console.log(obj1);

// console.log(obj2 === obj1);
export default {
  name: 'Home',
  data() {
    return {
      num: 1,
      str:"明天周末好开心",
      arr: ["德玛西亚", "永世长存", "犯我德邦者", "霸王硬上弓"],
      obj: {
        name: '喜之郎',
        hit: 60,
        sex: "雄性草稞动物",
        blood: 400
      }
    }
  },

  methods: {
    changeObj() {
      this.obj.hit = 70
      this.obj.blood = 450
    },

    changeArr() {
      this.arr.push('敌军还有30秒到达战场')
    }
  },


  watch: { 
    // 最简单的数据监听方法 只能监听基本数据类型的变化
    num(newValue, oldValue) {
      // console.log(newValue, oldValue);
    },
    str: {
      handler(val, old) {
        // console.log(val, old);
      },
      immediate: true // 使用该属性 页面进入后数据监听会立即执行一次
    },

    'obj.hit'(val, old) { // 监听对象中的单个属性变化的方法
      // console.log(val, old);
    },

    'obj.blood'(val, old) {
      // console.log(val, old)
    },

    obj: { // 深度监听 可以监听引用数据类型中所有的属性的话
      handler(val) {
        console.log(val);
      },
      deep: true
    },

    // 'arr[3]'(val) { // 错误写法
    //   console.log(val);
    // }
    arr: {
      handler(val) {
        console.log(val)
      },
      deep: true
    }
  }
}
</script>
